let shop = document.querySelector(".shop");
let from = document.querySelector(".from ul");
let from_show = document.querySelector(".from_show ul");
let main_box = document.querySelector("#main_box ul");

let shopID = 0;
let areaID = 0;

gsproduct(shopID,areaID);

$(".from ul").slideUp().finish();
$(".from_show ul").slideUp().finish();

const xhr1 = new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getgsshop",true);
xhr1.onload = function(){
    if(xhr1.status === 200){
        let res1 = JSON.parse(xhr1.responseText);
        console.log(res1.result);

        let froms = "";
        res1.result.forEach(item => {
            froms += `<li id="${item.shopId}">
                        ${item.shopName}
                    </li>`
        })
        from.innerHTML = froms;


        // $(".from ul").slideUp(0,function(){
        //     $(this).prop("flag",false);
        // });

        $(".shop").click(function(){
            $(this).children().eq(1).replaceWith($("<span>▲</span>"))
            $(this).parent().parent().find(".from_show ul").slideUp();

            $(".from ul").slideDown();

            $(".from ul li").click(function(){
                // console.log(1);
                $(".from ul").slideUp();
                shopID = $(this).prop("id");
                gsproduct(shopID,areaID);
            })
        });

    }
}
xhr1.send(null);

const xhr2 = new XMLHttpRequest();
xhr2.open("get","http://chst.vip:1234/api/getgsshoparea",true);
xhr2.onload = function(){
    if(xhr2.status === 200){
        let res2 = JSON.parse(xhr2.responseText);
        console.log(res2.result);

        let from_shows = "";
        res2.result.forEach(item => {
            from_shows += `<li id="${item.areaId}">
                            ${item.areaName}
                        </li>`

        })
        from_show.innerHTML = from_shows;

        $(".place").click(function(){
            $(this).children().eq(1).replaceWith($("<span>▲</span>"))
            $(this).parent().parent().find(".from ul").slideUp();

            $(".from_show ul").slideDown();

            $(".from_show ul li").click(function(){
                // console.log(1);
                $(".from_show ul").slideUp();

                areaID = $(this).prop("id");
                gsproduct(shopID,areaID);
            })
        });

    }
}
xhr2.send(null);
    

function gsproduct(shopId,areaId){
    const xhr = new XMLHttpRequest();
    xhr.open("get",`http://chst.vip:1234/api/getgsproduct?shopid=`+shopId+`&areaid=`+areaId,true);
    xhr.onload = function(){
        if(xhr.status === 200){
            let res = JSON.parse(xhr.responseText);
            console.log(res.result);
    
            let main_boxs = "";
            res.result.forEach(item => {
                main_boxs += `<li>
                                <a href="#">
                                    <img src="${item.productImg}">
                                    <div class="title">${item.productName}</div>
                                    <p>${item.productPrice}</p>
                                </a>
                            </li>`
            })
            main_box.innerHTML = main_boxs;

            
        }
    }
    xhr.send(null);
}


// $(".from_show ul").slideUp(0,function(){
//     $(this).prop("flag",false);
// });
// $(".place").click(function(){
//     // console.log(1);
//     $(this).parent().parent().find(".from_show ul").slideToggle().siblings().find(".from_show ul").slideUp();
//     $(this).parent().parent().find(".from ul").slideUp();
// });
